<template>
  <div class="screen-main">
    <HeaderIndex />
    <div class="content">
      <div class="gis-box">
        <GisIndex v-if="HomeService.cityType.value === '1'" />
        <CityMap v-else />
      </div>
      <template v-if="HomeService.tabType.value === TAB_TYPE.TSGZ">
        <TsgzIndex v-if="HomeService.cityType.value === '1'" />
        <TsgzCityIndex v-else />
      </template>

      <ZhypIndex v-if="HomeService.tabType.value === TAB_TYPE.ZHYP" />
      <ZhjgIndex v-if="HomeService.tabType.value === TAB_TYPE.ZHJG" />
      <KxffIndex v-if="HomeService.tabType.value === TAB_TYPE.KXFF" />
      <SjjrIndex v-if="HomeService.tabType.value === TAB_TYPE.SJJR" />
    </div>

    <template v-if="HomeService.cityType.value === '1'">
      <div class="mask left-mask"></div>
      <div class="mask right-mask"></div>
    </template>

  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { TAB_TYPE, HomeService } from '@/views/home/homeService';
import HeaderIndex from '../header/index.vue';
import GisIndex from '../gis/index.vue';
import TsgzIndex from '../tsgz/index.vue';
import ZhypIndex from '../zhyp/index.vue';
import ZhjgIndex from '../zhjg/index.vue';
import KxffIndex from '../kxff/index.vue';
import SjjrIndex from '../sjjr/index.vue';
import TsgzCityIndex from '../tsgzCity/index.vue';
import CityMap from '../gis/cityMap/index.vue';

defineComponent({ name: 'HomeIndex' });
</script>

<style scoped lang="scss">
.screen-main {
  @apply h-screen w-full relative;

  .content {
    @apply box-border relative w-full h-[calc(100%-120px)] px-[85px] pb-[34px];

    .gis-box {
      @apply absolute top-0 left-0 w-full h-full z-0;
    }
  }

  .mask {
    @apply absolute bottom-0 h-[calc(100%-120px)] w-[1320px];
    z-index: -1;
  }

  .left-mask {
    @apply left-0;
    background: url('@/assets/mask.png') no-repeat 0 -120px;

  }

  .right-mask {
    @apply right-0;
    background: url('@/assets/mask.png') no-repeat -2520px -120px;
  }
}
</style>
